<template>
	<div class="document-content" id="document-content">
		<div class="main-width" :style="{'height': innerHeight}">
			<!-- 左侧导航栏 start -->
			<div class="side-nav" :style="{'height': sideNavHeight}">
				<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
			      <el-menu-item-group v-for="(item,index) in functionDocument.sideNavList" :key="index" :title="item.title">
			        <el-menu-item v-for="(ele,idx) in item.subTitles" :key="idx" :index="ele.menuIndex" @click="jump(ele.globalNo)">{{ele.title}}</el-menu-item>
			      </el-menu-item-group>
			    </el-menu>
			</div>
			<!-- 左侧导航栏 end -->

			<!-- 右侧内容 start -->
			<div class="content">
				<div class="content-info" v-for="(item,index) in functionDocument.contentInfo">
					<div v-html="item.content"></div>
				</div>
			</div>
			<!-- 右侧内容 start -->
		</div>
	</div>
</template>
<script>
	
	import store from '../store/index.js'
	import {functionDocument} from '../config/interface.js'
	import {fetch} from '../config/fetch.js'

	export default{
		data(){
			return {
				userId: store.state.userId,
				scroll: 0,
				clickFlag: true,
				functionDocument: {
					sideNavList: [],
					contentInfo: []
				}
				
			}
		},
		computed: {
			innerHeight () {
				var innerHeight = parseInt(window.innerHeight-36-119);
				return innerHeight+'px';
			},
			sideNavHeight () {
				var sideNavHeight = parseInt(window.innerHeight-36-219);
				return sideNavHeight+'px';
			}
		},
		mounted() {
			this.documentInit();
			var documentContent = document.getElementById('document-content');
			documentContent.addEventListener('scroll', this.dataScroll);
		},
		watch: {
			scroll: function () {
				this.loadSroll();
			}
		},
		methods: {
			// 商品列表轮播
	    	documentInit(){
	    		var that = this;
				var data = {
					userId: this.userId
				};
				var url = functionDocument;
				fetch(url, data)
				.then(res => {
                    var data = res.data;    
                    var data_length = data.length;
                    if(data_length > 0){
                    	for(var i=0; i < data_length; i++){
	                    	var sideNavObj1 = {};
	                    	sideNavObj1.title = data[i].title;
	                    	sideNavObj1.subTitles = [];
	                    	var subTitles_length = data[i].subTitles.length;

	                    	if(subTitles_length > 0){
	                    		for(var j = 0; j< subTitles_length; j++){
		                    		var sideNavObj2 = {};
		                    		var contentInfoObj3 = {};
		                    		sideNavObj2.title = data[i].subTitles[j].title;
		                    		sideNavObj2.globalNo = data[i].subTitles[j].globalNo;
		                    		sideNavObj2.menuIndex = (data[i].subTitles[j].globalNo+1).toString();
		                    		sideNavObj1.subTitles.push(sideNavObj2);

		                    		contentInfoObj3.content = data[i].subTitles[j].content;
		                    		contentInfoObj3.globalNo = data[i].subTitles[j].globalNo;
		                    		that.functionDocument.contentInfo.push(contentInfoObj3);
		                    	}
	                    	}

	                    	that.functionDocument.sideNavList.push(sideNavObj1);
	                    }
                    }
                    
                });
	    	},
			dataScroll: function () {
				var documentContent = document.getElementById('document-content');
				this.scroll =  documentContent.scrollTop ||  documentContent.scrollTop;

			},
			jump(index) {
				if(this.clickFlag){
					this.clickFlag = false;
					 // 用 class="content-info" 添加锚点
					var contentInfo = document.querySelectorAll('.content-info');
					var total = contentInfo[index].offsetTop;

					var documentContent = document.getElementById('document-content');
					var distance = this.scroll;

					// 平滑滚动，时长500ms，每10ms一跳，共50跳
					var step = total / 20;
					if (total > distance) {
						smoothDown();
					} else {
						var newTotal = distance - total;
						step = newTotal / 20;
						smoothUp();
					}
					this.clickFlag = true;

					function smoothDown () {
						if (distance < total) {
							distance += step;
							documentContent.scrollTop = distance;
							documentContent.pageYOffset = distance;
							setTimeout(smoothDown, 10);
						} else {
							documentContent.scrollTop = total;
							documentContent.pageYOffset = total;
						}
					}
					function smoothUp () {
						if (distance > total) {
						 	distance -= step;
						　　documentContent.scrollTop = distance;
							documentContent.pageYOffset = distance;
							setTimeout(smoothUp, 10);
						} else {
							documentContent.scrollTop = total;
							documentContent.pageYOffset = total;
						}
					} 

				}
			},
			loadSroll: function () {
				var self = this;
				var navs = document.getElementsByClassName('el-menu-item');
				var sections = document.getElementsByClassName('content-info');

				for (var i = sections.length - 1; i >= 0; i--) {
					this.removeClass(navs[i],'is-active');
				}

				for (var i = sections.length - 1; i >= 0; i--) {
					if (self.scroll >= sections[i].offsetTop) {
						this.addClass(navs[i],'is-active');
						break;
					}
				}
			},
			hasClass: function(elements,cName){ 
			  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); 
			},
			addClass: function(elements,cName) {
				if( !this.hasClass( elements,cName ) ){ 
				    elements.className += " " + cName; 
				}; 
			},
			removeClass: function(elements,cName) {
				if( this.hasClass( elements,cName ) ){ 
				    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
				}; 
			}
		}
	}
</script>